<template>
  <div class="userinfo">
    <!-- 头部navbar -->
    <van-nav-bar title="编辑资料" class="navbar" fixed>
      <template #left>
        <van-icon name="arrow-left" class="back" @click="back" />
      </template>
    </van-nav-bar>
    <!-- 头像区域 -->
    <van-cell class="aa logo" title="头像" value="">
      <template #default>
        <!-- 上传修改头像区域 -->
        <van-uploader
          class="touxiang"
          :after-read="afterRead"
          :before-read="beforeRead"
        >
          <img :src="userinfo.photo" alt="" class="img" />
        </van-uploader>
      </template>
      <template #right-icon> <van-icon name="arrow" class="cc" /> </template>
    </van-cell>
    <div class="ll"><div class="line"></div></div>
    <!-- 名称区域 -->
    <van-cell
      class="aa"
      title="名称"
      :value="userinfo.name"
      @click="shownamebox"
    >
      <template #right-icon> <van-icon name="arrow" class="cc" /> </template>
    </van-cell>
    <div class="ll"><div class="line"></div></div>
    <!-- 性别区域 -->
    <van-cell
      class="aa"
      title="性别"
      :value="userinfobox.gender == 1 ? '男' : '女'"
      @click="showsex = true"
    >
      <template #right-icon> <van-icon name="arrow" class="cc" /> </template>
    </van-cell>
    <div class="ll"><div class="line"></div></div>
    <!-- 生日日期区域 -->
    <van-cell title="生日" value="" @click="choosedate">
      <template #right-icon
        ><span class="day">{{ userinfobox.birthday }} </span>
        <van-icon name="arrow" class="cc"
      /></template>
    </van-cell>
    <div class="ll"><div class="line"></div></div>
    <!-- 选择生日日期区域 -->
    <van-popup
      v-model="dateshow"
      position="bottom"
      :style="{ height: '50%' }"
      round
      class="pop"
    >
      <van-datetime-picker
        @confirm="confirm"
        @cancel="cancel"
        v-model="currentDate"
        type="date"
        title="选择年月日"
        :min-date="minDate"
        :max-date="maxDate"
    /></van-popup>
    <!-- 修改名称区域 -->
    <van-dialog
      v-model="show"
      title="修改名称"
      show-cancel-button
      class="wra"
      :before-close="onBeforeClose"
    >
      <van-field
        v-model="value"
        label="  "
        placeholder="请输入名称"
        maxlength="11"
        ref="input"
      />
    </van-dialog>
    <van-popup
      v-model="showsex"
      position="bottom"
      :style="{ height: '50%' }"
      round
    >
      <van-picker
        show-toolbar
        title="修改性别"
        :columns="columns"
        :default-index="userinfobox.gender == 1 ? 0 : 1"
        @confirm="onConfirm"
        @cancel="onCancel"
      />
    </van-popup>
  </div>
</template>

<script>
import { setnewuserphoto, setuserinfo, getuser } from '../../api/userinfo'
import { mapState } from 'vuex'
import { Toast } from 'vant'
import { Notify } from 'vant';
export default {
  // 组件名称
  name: 'userinfo',
  // 组件参数 接收来自父组件的数据
  props: {},
  // 局部注册的组件
  components: {},
  // 组件状态值
  data () {
    return {
      userinfobox: {},
      minDate: new Date(1900, 0, 1),
      maxDate: new Date(2026, 11, 31),
      currentDate: new Date(2021, 0, 1),
      dateshow: false,
      show: false,
      value: '',
      numday: '',
      showsex: false,
      columns: [
        // 第一列
        {
          values: ['男', '女'],
        }]
    }
  },
  computed: {
    ...mapState(['userinfo']),
  },
  // 获取个人资料
  async created () {
    this.getuserinfos()
  },
  methods: {
    // 获取个人资料数据请求功能
    async getuserinfos () {
      const res = await getuser()
      this.userinfobox = res.data.data
      // 去除年月日
      this.numday = res.data.data.birthday.replace('年', '').replace('月', '').replace('日', '')
      // 更新页面时间显示
      this.userinfobox.birthday = this.numday
      // 保存用户上次修改后的name名称,下次修改时直接显示目前的名称
      this.value = this.userinfobox.name
    },
    // 回退到个人中心页面
    back () {
      this.$router.push('/layout/mine')
    },
    // 点击选择时间显示时间器功能
    choosedate () {
      this.dateshow = true
      // 设置默认显示时间
      this.currentDate = new Date(this.userinfobox.birthday)
    },
    // 点击日历完成按钮触发
    async confirm () {
      this.dateshow = false
      // 2021年-8月-9日
      // 发送更新生日请求
      const newtime = this.$moment(this.currentDate).format('yyyy年-MM月-DD日')  // 改造格式
      await setuserinfo({ birthday: newtime })
      // 更新页面上的生日显示
      this.userinfobox.birthday = newtime.replace('年', '').replace('月', '').replace('日', '')
    },
    // 限制用户只能上传图片格式的文件
    beforeRead (file) {
      if (!/\/(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(file.type)) {
        Toast('请上传图片');
        return false;
      }
      return true;
    },
    // 上传新头像功能
    async afterRead (file) {
      // 此时可以自行将文件上传至服务器
      // 创建formdata表单对象
      const fd = new FormData()
      fd.append('photo', file.file)
      const res = await setnewuserphoto(fd)
      this.userinfobox.photo = res.data.data.photo
      this.$store.commit('setuserinfophoto', res.data.data.photo)
    },
    // 确认修改名称功能
    // 异步关闭弹出框-在关闭前做些事情
    async onBeforeClose (action, done) {
      // 如果点击了确认按钮,那么就校验规则,如果成功就发送请求,并且done()关闭弹出框
      if (action === "confirm") {
        let reg = /[\u4E00-\u9FA5A-Za-z0-9]{1,10}$/
        if (reg.test(this.value)) {
          await setuserinfo({ name: this.value })
          this.$store.commit('setuserinfoname', this.value)
          done()
        } else {
          // 如果校验不通过,就提示用户,并阻止弹出框关闭
          Notify({ type: 'warning', message: '请输入1-10位中英文以及数字的名称' });
          this.$nextTick(() => {
            this.$refs.input.$el.querySelector('input').focus()
          })
          done(false)
        }
      } else {   // 如果点击了取消就把输入的内容重置为之前的名称,并关闭弹出框
        done()
        setTimeout(() => {
          this.value = this.userinfo.name
        }, 300)
      }
    },
    // 点击修改名称弹出弹出框并获得焦点
    shownamebox () {
      this.show = true
      this.$nextTick(() => {
        this.$refs.input.$el.querySelector('input').focus()
      })
    },
    // 点击取消隐藏时间选择器
    cancel () {
      this.dateshow = false
    },
    // 生日模块没有对应接口,所以只展示无法修改
    onConfirm () { this.showsex = false },
    onCancel () { this.showsex = false }
  }
}
</script>
<style scoped lang="less">
.navbar {
  background-color: #1989fa;
  color: #fff;
}
.userinfo {
  padding-top: 46px;
}

.line {
  height: 1px;
  width: 100%;
  background-color: #eee;
}
.ll {
  padding: 0 16px;
}
.bb {
  font-size: 16px;
  margin-top: 6px;
  margin-right: 3px;
}
.day {
  color: #969799;
}
.cc {
  margin-top: 4px;
}
.logo {
  height: 78px;
  padding-top: 32px;
}
.touxiang {
  position: fixed;
  right: 32px;
  top: 56px;
  z-index: 2000;
}
.img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}
.loader {
  width: 500px;
  height: 600px;
}
.back {
  color: #fff;
  font-size: 18px;
}
.war /deep/ .van-field__label {
  width: 0;
}
.wra /deep/ .van-field__control {
  position: relative;
  left: -48px;
  width: 100%;
  text-align: center;
}
</style>
